<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 基础题库 -->
            <el-row>
              <el-col class="top_title">
                <span>说明：目前支持学科和关键字条件筛选</span>
                <el-button
                  icon="el-icon-edit"
                  type="success"
                  @click="$router.push('/questions/new')"
                  >新增试题</el-button>
              </el-col>
            </el-row>
            <el-form :model="formData" ref="formData" label-width="80px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label-width="80px" label="学科" prop="subjectID" >
                    <el-select
                      style="width:100%;"
                      v-model="formData.subjectID"
                      @change="secondIndexChange(formData.subjectID),getLabelList(formData.subjectID)"
                      >
                      <el-option
                        v-for="item in subjectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="二级目录" prop="catalogID">
                    <el-select style="width:100%;" v-model="formData.catalogID">
                      <el-option
                        v-for="item in secondSubjectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="标签" prop="tags">
                    <el-select style="width:100%;" v-model="formData.tags">
                      <el-option
                        v-for="item in tagsList"
                        :key="item.id"
                        :label="item.tagName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="关键字" prop="keyword">
                    <el-input v-model="formData.keyword" placeholder="根据题干搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="试题类型" prop="questionType" >
                    <el-select style="width:100%;" v-model="formData.questionType">
                      <el-option
                        v-for="item in constants.questionType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="难度" prop="difficulty">
                    <el-select style="width:100%;" v-model="formData.difficulty">
                      <el-option
                        v-for="item in constants.difficulty"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="方向" prop="direction">
                    <el-select style="width:100%;" v-model="formData.direction">
                      <el-option
                        v-for="item in constants.direction"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="录入人" prop="creatorID">
                    <el-select style="width:100%;" v-model="formData.creatorID">
                      <el-option
                        v-for="item in ['超级管理员','录入管理员']"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="6">
                  <el-form-item label="题目备注" prop="remarks" >
                    <el-input v-model="formData.remarks"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="企业简称" prop="shortName">
                    <el-input v-model="formData.shortName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label-width="80px"  label="城市">
                    <el-col :span="12">
                      <el-form-item  prop="province" >
                        <el-select style="width:100%;"  v-model="formData.province"  @change="getCity">
                          <el-option
                            v-for="item in provinceList"
                            :key="item"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="city">
                        <el-select style="width:100%;" v-model="formData.city">
                          <el-option
                            v-for="item in cityList"
                            :key="item"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                </el-col>
                <el-col :span="6" style="text-align:right;">
                  <el-form-item>
                    <el-button @click="reset">清除</el-button>
                    <el-button @click="getQuestionList" type="primary">搜索</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-alert
              :title="cTitle"
              type="info"
              class="alert"
              :closable="false"
              show-icon=""
            ></el-alert>
            <el-main>
              <el-table :data="questionList" style="width: 100%">
                <el-table-column prop="number" width="100" label="试题编号">
                </el-table-column>
                <el-table-column prop="subject" width="70" label="学科">
                </el-table-column>
                <el-table-column prop="catalog" width="100" label="目录">
                </el-table-column>
                <el-table-column prop="" width="70" label="题型">
                  <template #default="{row}">
                    <span>{{ constants.questionType[row.questionType-1].label }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="题干">
                  <template #default="{row}">
                    <p v-html="row.question"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="addDate" label="录入时间">
                  <template #default="{row}">
                   {{time(row.addDate)}}
                  </template>
                </el-table-column>
                <el-table-column prop="" width="70" label="难度">
                  <template #default="{row}">
                    <span>{{ constants.difficulty[row.difficulty-1].label }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="creator" label="录入人">
                </el-table-column>
                <el-table-column  prop="" label="操作">
                  <template #default="{row}">
                    <el-button @click="viewDetail(row)" size="small" type="primary" icon="el-icon-view" circle plain></el-button>
                    <el-button @click="editDetail(row)" command="edit" size="small" type="success" icon="el-icon-edit" circle plain></el-button>
                    <el-button @click="delQuestion(row)" size="small" type="danger" icon="el-icon-delete" circle plain></el-button>
                    <el-button @click="addChoice(row)" size="small" type="warning" icon="el-icon-check" circle plain></el-button>
                  </template>
                </el-table-column>
               </el-table>
               <el-row type="flex" justify="end" style="margin-top: 20px">
                  <el-pagination
                  background
                  @size-change="sizeChange"
                  @current-change="currentChange"
                  :current-page="formData.page"
                  :page-size="formData.pagesize"
                  :total="total"
                  :page-sizes="[5,10,20,30,]"
                  layout="prev, pager, next, sizes, jumper"
                  ></el-pagination>
               </el-row>
            </el-main>
      </el-card>
    </div>
    <articles-preview
      :showDialog="showDialog"
      @handleClose="handleClose"
      ref="refView"
    ></articles-preview>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { list as tagList } from '@/api/hmmm/tags'
import { list as questionList, remove, choiceAdd } from '@/api/hmmm/questions'
import * as constants from '@/api/hmmm/constants'
import Dayjs from 'dayjs'
import ArticlesPreview from '../components/articles-preview.vue'
export default {
  components: {
    ArticlesPreview
  },
  created () {
    this.provinceList = provinces()
    this.getSubjectsList()
    this.getQuestionList()
  },
  data () {
    return {
      provinceList: [],
      cityList: [],
      subjectList: [],
      secondSubjectList: [],
      tagsList: [],
      questionList: [],
      total: 0,
      constants: constants,
      formData: {
        province: null,
        city: null,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        page: 1,
        pagesize: 10
      },
      showDialog: false
    }
  },
  methods: {
    async viewDetail (row) {
      this.showDialog = true
      this.$refs.refView.detailList(row.id)
    },
    handleClose () {
      this.showDialog = false
    },
    time (time) {
      return Dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    editDetail (row) {
      this.$router.push({ path: '/questions/new/', query: { id: row.id } })
    },
    currentChange (val) {
      this.formData.page = val
      this.getQuestionList()
    },
    sizeChange (val) {
      this.formData.pagesize = val
      this.getQuestionList()
    },
    addChoice (item) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        await choiceAdd({
          id: item.id,
          choiceState: 1
        })
        this.$message.success('添加成功')
        this.getQuestionList()
      })
    },
    delQuestion (item) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        await remove(item)
        this.$message.success('删除成功')
        this.getQuestionList()
      })
    },
    async getQuestionList () {
      try {
        const { data: res } = await questionList(this.formData)
        this.total = res.counts
        this.questionList = res.items
        console.log(this.formData)
      } catch (error) {}
    },
    reset () {
      this.$refs.formData.resetFields()
    },
    getCity () {
      this.cityList = citys(this.formData.province)
    },
    async getSubjectsList () {
      try {
        const { data: res } = await subjectList()
        this.subjectList = res
      } catch (error) {
      }
    },
    async secondIndexChange (id) {
      try {
        const { data: res } = await directoryList({ subjectID: id })
        this.secondSubjectList = res
      } catch (error) {

      }
    },
    async getLabelList (id) {
      try {
        const { data: res } = await tagList({ subjectID: id })
        this.tagsList = res.items
      } catch (error) {

      }
    }
  },
  computed: {
    cTitle () {
      return '数据一共' + this.total + '条'
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {

  .top_title {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
      color: pink;
    }
  }
}
</style>
